<template>
  <div id="app">
    <Header v-show="isShowHeader" />
    <router-view />
    <Footer v-show="isShowFooter" />
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'App',
  components: {
    Footer,
    Header
  },
  data() {
    return {
      originalHeight: 0, //原始高度
      screenHeight: 0, //实时高度
      isShowFooter: true
    }
  },
  computed: {
    isShowHeader() {
      return this.$route.path!=='/user'
    }
  },
  mounted() {
    //首次进入的原始高度
    this.originalHeight = document.documentElement.clientHeight
    window.addEventListener('resize', this.watchResize)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.watchResize)
  },

  watch: {
    screenHeight(newHeight) {
      //监听屏幕高度变化
      this.isShowFooter = this.originalHeight <= newHeight
    }
  },

  methods: {
    watchResize() {
      //实时变化的窗口高度
      this.screenHeight = document.documentElement.clientHeight
    }

    // btnClick() {
    //   this.$router.push({
    //     path: '/home2'
    //   })
    // }
  }
}
</script>

<style>
</style>
